<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>试题导入</title>
    <link rel="shortcut icon" href="../../favicon.ico">
    <link href="../../css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="../../css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="../../css/animate.min.css" rel="stylesheet">
    <link href="../../css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <!--单选框样式-->
    <link href="../../css/labelauty.css" rel="stylesheet"/>

    <script src="../../js/jquery.min.js?v=2.1.4"></script>
    <script src="../../js/bootstrap.min.js?v=3.3.6"></script>
    <!--单选框js-->
    <script src="../../js/labelauty.js"></script>
    <style type="text/css">
        .control-label{
            text-align: right;
        }
    </style>
    <!--文件上传-->
    <style type="text/css">
        .file {
            position: relative;
            height: 40px;
            line-height: 40px;
            border:0;

        }

        .file label {
            display: inline-block;
        }

        .file-style-user-define {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            height: 40px;
            line-height: 40px;
            font-size: 0;

            /*应对子元素为 inline-block 引起的外边距*/
        }

        .file-style-user-define input[type="text"] {
            display: inline-block;
            vertical-align: middle;
            width: 360px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

        }

        .file input[type="file"] {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 3;
            opacity: 0;
            width: 300px;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>温馨提示: &nbsp;
                        <small style="color: orangered;font-size: large">选择试题分类→下载模版→选择文件→导入</small>
                    </h5>
                </div>
                <div class="ibox-content" style="min-height: 500px">
                    <form  class="form-horizontal" >
                        <!--试题分类选择-->
                        <div style="border: 1px solid #e5e6e7">
                            <small>第一步:试题分类选择</small>
                            <div class="form-group">
                                <label class="col-md-2 control-label">问答题</label>
                                <div class="col-md-9">
                                    <div class="rdo">
                                        <!--腧穴-->
                                        <input type="radio" name="exam-category" class="rdolist" checked="checked"/>
                                        <label class="rdobox" radio-exam-category-val="问答题-腧穴">
                                            <span class="check-image"></span>
                                            <span class="radiobox-content">腧穴</span>
                                        </label>
                                        <!--内科-->
                                        <input type="radio" name="exam-category" class="rdolist" checked="checked"/>
                                        <label class="rdobox"  radio-exam-category-val="问答题-内科">
                                            <span class="check-image"></span>
                                            <span class="radiobox-content">内科</span>
                                        </label>
                                        <!--伤科-->
                                        <input type="radio" name="exam-category" class="rdolist" checked="checked"/>
                                        <label class="rdobox"  radio-exam-category-val="问答题-伤科">
                                            <span class="check-image"></span>
                                            <span class="radiobox-content">伤科</span>
                                        </label>
                                        <!--妇科-->
                                        <input type="radio" name="exam-category" class="rdolist" checked="checked"/>
                                        <label class="rdobox"  radio-exam-category-val="问答题-妇科">
                                            <span class="check-image"></span>
                                            <span class="radiobox-content">妇科</span>
                                        </label>
                                        <!--儿科-->
                                        <input type="radio" name="exam-category" class="rdolist" checked="checked"/>
                                        <label class="rdobox"  radio-exam-category-val="问答题-儿科">
                                            <span class="check-image"></span>
                                            <span class="radiobox-content">儿科</span>
                                        </label>
                                        <!--触诊-->
                                        <input type="radio" name="exam-category" class="rdolist" checked="checked"/>
                                        <label class="rdobox"  radio-exam-category-val="问答题-触诊">
                                            <span class="check-image"></span>
                                            <span class="radiobox-content">触诊</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">穴位定位</label>
                                <div class="col-md-9">
                                    <div class="rdo">
                                        <!--成人穴位-->
                                        <input type="radio" name="exam-category" class="rdolist" checked="checked"/>
                                        <label class="rdobox" radio-exam-category-val="穴位定位-成人穴位">
                                            <span class="check-image"></span>
                                            <span class="radiobox-content">成人穴位</span>
                                        </label>
                                        <!--儿科穴位-->
                                        <input type="radio" name="exam-category" class="rdolist" checked="checked"/>
                                        <label class="rdobox" radio-exam-category-val="穴位定位-儿科穴位">
                                            <span class="check-image"></span>
                                            <span class="radiobox-content">儿科穴位</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">单项手法</label>
                                <div class="col-md-9">
                                    <div class="rdo">
                                        <!--成人手法-->
                                        <input type="radio" name="exam-category" class="rdolist" checked="checked"/>
                                        <label class="rdobox" radio-exam-category-val="单项手法-成人手法">
                                            <span class="check-image"></span>
                                            <span class="radiobox-content">成人手法</span>
                                        </label>
                                        <!--儿科手法-->
                                        <input type="radio" name="exam-category" class="rdolist" checked="checked"/>
                                        <label class="rdobox" radio-exam-category-val="单项手法-儿科手法">
                                            <span class="check-image"></span>
                                            <span class="radiobox-content">儿科手法</span>
                                        </label>
                                        <!--触诊诊断-->
                                        <input type="radio" name="exam-category" class="rdolist" checked="checked"/>
                                        <label class="rdobox" radio-exam-category-val="单项手法-触诊诊断">
                                            <span class="check-image"></span>
                                            <span class="radiobox-content">触诊诊断</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">成套手法</label>
                                <div class="col-md-9">
                                    <div class="rdo">
                                        <!--妇科-->
                                        <input type="radio" name="exam-category" class="rdolist" checked="checked"/>
                                        <label class="rdobox" radio-exam-category-val="成套手法-妇科">
                                            <span class="check-image"></span>
                                            <span class="radiobox-content">妇科</span>
                                        </label>
                                        <!--儿科-->
                                        <input type="radio" name="exam-category" class="rdolist" checked="checked"/>
                                        <label class="rdobox" radio-exam-category-val="成套手法-儿科">
                                            <span class="check-image"></span>
                                            <span class="radiobox-content">儿科</span>
                                        </label>
                                        <!--伤科-->
                                        <input type="radio" name="exam-category" class="rdolist" checked="checked"/>
                                        <label class="rdobox" radio-exam-category-val="成套手法-伤科">
                                            <span class="check-image"></span>
                                            <span class="radiobox-content">伤科</span>
                                        </label>
                                        <!--内科-->
                                        <input type="radio" name="exam-category" class="rdolist" checked="checked"/>
                                        <label class="rdobox" radio-exam-category-val="成套手法-内科">
                                            <span class="check-image"></span>
                                            <span class="radiobox-content">内科</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div><br>
                        <!--下载模板-->
                        <div style="border: 1px solid #e5e6e7">
                            <small>第二步:下载模板</small>
                            <div class="form-group">
                                <label class="col-md-2 control-label">下载模板</label>
                                <div class="col-md-4 control-label" style="text-align: left;color: #0e9aef;">
                                    <u style="cursor: pointer">请点击此处进行模板下载&nbsp;<i class="fa fa-download"></i></u>
                                </div>
                            </div>
                        </div><br>
                        <!--选择文件-->
                        <div style="border: 1px solid #e5e6e7">
                            <small>第三步:选择文件</small>
                            <div class="form-group ">
                                <label class="col-md-2 control-label">选择文件 </label>
                                <div class="col-md-6 file ">
                                    <div class="col-md-2 file-style-user-define">
                                        <input type="text" id="file-msg" value="请选择文件">
                                        <input type="file" name="examinationsFile" id="file-id" size="10" >
                                    </div>
                                </div>
                            </div>
                        </div><br>
                        <!--导入-->
                        <div style="border: 1px solid #e5e6e7">
                            <small>第三步:导入</small>
                            <div class="form-group">
                                <label class="col-md-2 control-label" style="line-height: 35px">试题导入</label>
                                <div class="col-md-1 control-label"style="text-align: left">
                                    <button class="btn-primary" >导入</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
<script>
    $(document).ready(function () {
        //参数{input类名，选择类型(单选or多选)}
        $(".rdolist").labelauty("rdolist", "rdo");
    });
    /* 文件上传处理样式 */
    document.getElementById("file-id").onchange = function () {
        document.getElementById("file-msg").value = document.getElementById("file-id").value;
    };
</script>

</html>